﻿<%@ Page Title="流量分析" Language="C#" MasterPageFile="~/AnalysisMaster.Master" AutoEventWireup="true" CodeBehind="TrafficAnalysis.aspx.cs" Inherits="NetFlow.TrafficAnalysis" %>

<asp:Content ID="Content1" ContentPlaceHolderID="ContentPlaceHolder1" runat="server">
    <!-- 引入 Chart.js 库 -->
    <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>

    <div class="container-fluid">
        <h2 class="text-center mt-4">网络流量分析</h2>


        <div class="row mt-4">
            <!-- 区域 1: 流量区间统计（柱状图） -->
            <div class="col-md-6">
                <div class="card">
                    <div class="card-header text-center">流量区间统计</div>
                    <div class="card-body">
                        <canvas id="trafficBucketBarChart" style="width: 100%; height: 350px;"></canvas>
                    </div>
                </div>
            </div>

        </div>
    </div>

    <script>
        document.addEventListener('DOMContentLoaded', function () {
            if (typeof trafficBuckets !== 'undefined') {
                // 流量区间统计（柱状图）
                var ctx1 = document.getElementById('trafficBucketBarChart').getContext('2d');
                var bucketLabels = Object.keys(trafficBuckets);
                var bucketValues = Object.values(trafficBuckets);

                new Chart(ctx1, {
                    type: 'bar',
                    data: {
                        labels: bucketLabels,
                        datasets: [{
                            label: '流量区间数量',
                            data: bucketValues,
                            backgroundColor: 'rgba(54, 162, 235, 0.6)'
                        }]
                    },
                    options: { responsive: true, maintainAspectRatio: false }
                });
            } else {
                console.error("No data available.");
            }
        });
    </script>
</asp:Content>